import { Directive, computed, onMounted, onUpdated, watch } from "vue"
import layoutStore from '@/store/index'

const handleText = (el: HTMLElement, binding: any) => {
    const dom = document.createElement('div')
    dom.innerHTML = binding.value
    el.innerHTML = dom.childNodes[0]?.nodeValue ?? ''
    // console.log('htmlTransformDirective', el)
}

// const htmlTransformDirective = {
//         // const layoutSe = layoutStore()
//         data() {
//             return {
//                 layoutSe: layoutStore()
//             }
//         },
//         mounted(el: HTMLElement, binding: any) {
//             handleText(el, binding)
//             watch(() => this.data().layoutSe.getLanguage, (newVal, oldVal) => {
//                 handleText(el, binding)
//             })
//         },

// }
// const htmlTransformDirective = {
//     setup(el: HTMLElement, binding: any) {
//         const layoutSe = layoutStore()

//         onMounted(() => {
//             handleText(el, binding)
//         }) 

//         watch(() => layoutSe.getLanguage, (newVal, oldVal) => {
//             handleText(el, binding)
//         })

//         return {
//             onMounted,
            
//         }
//     }
// }
const htmlTransformDirective = (el: HTMLElement, binding: any) => {
    const dom = document.createElement('div')
    dom.innerHTML = binding.value
    el.innerHTML = dom.childNodes[0]?.nodeValue ?? ''
}
export default htmlTransformDirective